/**
 * Created by kurong on 2021/9/13.
 */

/*获得button*/

/*
 *       Dom(Document Object Model)
 *
 *     document : html文件
 *
 *     document.querySelector("选择器名称");
 *
 * */

var element1 = document.querySelector("button");
console.log(element1);

var element2 = document.querySelector(".username");
console.log(element2);

var element3 = document.querySelector("input[type=password]");
console.log(element3);

//获得id="p4"的元素
console.log(document.querySelector("#p4"));

//获得.p1 下的.str1 元素
console.log(document.querySelector(".p1 .str1"));

//获得class="d1"下的 ul 元素
console.log(document.querySelector(".d1 ul"));


//获得class="d1"下的 ul的所有子元素
console.log(document.querySelector(".d1 ul").children);

//获得class="d1"下的 ul的第1个li 元素
console.log(document.querySelector(".d1 ul").firstElementChild);

//获得class="d1"下的 ul的第2个li 元素
console.log(document.querySelector(".d1 ul").children[1]);

//获得class="d1"下的 ul的第4个li 元素
console.log(document.querySelector(".d1 ul").children[3]);

//获得class="d1"下的 ul的最后个li 元素
console.log(document.querySelector(".d1 ul").lastElementChild);

//获得class="d1"下的 ul的第4个li 元素 的前一个兄弟元素
console.log(document.querySelector(".d1 ul").children[3].previousElementSibling);

//获得class="d1"下的 ul的第4个li 元素 的下一个兄弟元素
console.log(document.querySelector(".d1 ul").children[3].nextElementSibling);

//获得class="d1"下的 ul的第4个li 元素 的父元素
console.log(document.querySelector(".d1 ul").children[3].parentElement);

//console.log(document.querySelector(".d1 ul").children[3].previousSibling);

//console.log(document.querySelector(".d1 ul").children[3].previousSibling.previousSibling);


